{% extends 'front/index.html' %}

{% block content %}
    <div class="mobiles">
        <div class="container">
            <div class="w3ls_mobiles_grids">
                <div class="col-md-4 w3ls_mobiles_grid_left">
                    <div class="w3ls_mobiles_grid_left_grid">
                        <h3><b>User Center</b></h3>
                        <div class="w3ls_mobiles_grid_left_grid_sub">

                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <h4 class="panel-title asd">
                                            <a class="pa_italic" role="button" data-toggle="collapse"
                                               data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                                               aria-controls="collapseOne">
                                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span><i
                                                    class="glyphicon glyphicon-minus" aria-hidden="true"></i><b>地址管理</b>
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                                         aria-labelledby="headingOne">
                                        <div class="panel-body panel_text">
                                            <ul>
                                                <li><a href="{% url 'user_address_add' %}">地址添加</a></li>
                                                <li><a href="{% url 'user_address' %}">地址修改</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <ul class="panel_bottom">
                                <li><a href="{% url 'user_info' %}"><b>个人信息管理</b></a></li>
                                <li><a href="{% url 'user_payinfo' %}"><b>订单管理</b></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 w3ls_mobiles_grid_right">
                    <link href="/static/front/css/order.css" rel="stylesheet" type="text/css" media="all"/>
                    <div class="page_title">
                        <h2 class="fl">订单详情</h2>
                    </div>
                    <table class="table">
                        <tr>
                            <td>收件人：{{ order.name }}</td>
                            <td>联系电话：{{ order.phone }}</td>
                            <td>收件地址：{{ order.address2 }}</td>
                            <td>订单编号：{{ order_id }}</td>
                        </tr>
                        <tr>
                            <td>下单时间：{{ order.create_time|date:"Y-m-d H:i:s" }}</td>
                            <td>付款时间：{{ order.create_time|date:"Y-m-d H:i:s" }}</td>
                            <td>确认时间：{{ order.create_time|date:"Y-m-d H:i:s" }}</td>
                            <td>评价时间：- -</td>
                        </tr>
                        <tr>
                            <td>订单状态：<a>已完成</a></td>
                            <td colspan="3">订单备注：
                                <mark>{{ order.note }}</mark>
                            </td>
                        </tr>
                    </table>
                    <table class="table">
                        <tr>
                            <td class="center">产品图片</td>
                            <td class="center">产品名称</td>
                            <td class="center">型号</td>
                            <td class="center">单价</td>
                            <td class="center">数量</td>
                            <td class="center"><strong>总价</strong></td>
                            <td class="center">是否包邮</td>
                        </tr>
                        {% for p in products %}
                            <tr>
                                <td class="center"><img src="{{ p.sku_image }}" width="50" height="50"/></td>
                                <td class="center">{{ p.sku_name }}</td>
                                <td class="center">{{ p.sku.type }}</td>
                                <td class="center"><strong>$ {{ p.unit_price }}</strong></td>
                                <td class="center"><strong>{{ p.quantity }}</strong></td>
                                <td class="center"><strong>$ {% widthratio p.unit_price 1 p.quantity %}</strong></td>
                                {# widthratio 实现模版的乘法 将第二个参数设置为1 即可 #}
                                <td class="center">包邮</td>
                            </tr>
                        {% endfor %}
                    </table>
                    <h4 style="margin-left: 30px" id="money"> 总金额： ${{ order.payment }}</h4>
                </div>
            </div>
        </div>
    </div>

{% endblock %}